<script setup>
import {onMounted, ref} from 'vue'
import {pageApi,allScApi} from "../../../api/gradestudent";
import {allApi} from "../../../api/grade";
import {ElMessage, ElMessageBox} from "element-plus";

const tableData = ref({})
const grades=ref([])
// 表单状态
const filterState = ref(true)
const dates=ref([])
// 表单数据 -- 查询条件
const formData = ref({
  page: 1,
  size: 10,
  gid: 0
})

onMounted(async ()=>{
  const r=await allApi({type:0})
  grades.value=r.data
  console.log(grades.value)
  loadData()
})

const loadData=async ()=>{
  const r=await pageApi(formData.value)
  tableData.value=r.data;
}

const showList=ref(false)
const scourse=ref([])
const sc=ref({})
const onShowList= async (row)=>{
  showList.value=true
  sc.value.sid=row.id
  sc.value.gid=row.gradeId
  sc.value.sname=row.sname
  const r=await allScApi(sc.value)
  scourse.value=r.data
}
</script>
<template>
  <Box>
    <!-- 逻辑层 -->
  
    <!-- 逻辑层 -->

    <!-- 筛选 -->
    <template #filter v-if="filterState">
      <el-form :inline="true" :model="formData">

        <el-form-item label="选择班级">
            <el-select placeholder="请选择班级" v-model="formData.gid" style="width:200px">
              <el-option v-for="g in grades" :key="g.id" :label="g.name" :value="g.id"/>
            </el-select>
        </el-form-item>
       
        <el-form-item>
          <el-button type="primary" @click="loadData"> <span class="iconfont icon-sousuo"></span>搜索 </el-button>
          <el-button type="default"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </template>
    <!-- 筛选 -->

    <!-- 按钮组 -->
   
    <!-- 按钮组 -->

    <el-table :data="tableData.data" :border="true" class="qfTable" row-key="id" default-expand-all>
      <el-table-column label="序号" prop="id" align="center"></el-table-column>
      <el-table-column label="姓名" prop="sname" align="center"></el-table-column>
      <el-table-column label="部门名称" prop="deptName" align="center"></el-table-column>
      <el-table-column label="班级" prop="gradeId" align="center"></el-table-column>
      <el-table-column label="学习结果" prop="studyResult" align="center"></el-table-column>
      <el-table-column label="创建时间" prop="ctime" align="center"></el-table-column>
       <el-table-column label="操作" align="center">
       <template #default="scoped">
          <el-button @click="onShowList(scoped.row)">查看课程列表</el-button>
       </template>
       </el-table-column>
      
    </el-table>
    <!-- 分页 -->
    <el-pagination
        v-model:current-page="formData.page"
        v-model:page-size="formData.size"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="loadData"
        @current-change="loadData"
    />

    <el-dialog
    v-model="showList"
    title="班级学员课程列表"
    width="700"
    :before-close="() => (showList = false)"
  >
 <el-table :data="scourse" :border="true" class="qfTable" row-key="id" default-expand-all>
      <el-table-column label="序号" prop="id" align="center"></el-table-column>
      <el-table-column label="学员" prop="studentId" align="center"></el-table-column>
      <el-table-column label="课程" prop="courseId" align="center"></el-table-column>
      <el-table-column label="状态" prop="result" align="center"></el-table-column>
      <el-table-column label="类型" prop="type" align="center"></el-table-column>
      <el-table-column label="创建时间" prop="ctime" align="center" width="200"></el-table-column>
    </el-table>

    </el-dialog>
  </Box>
</template>

<style lang="scss" scoped></style>
